﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .navbar {
            display: none;
        }
    </style>
</head>

<body>
    <form class="layui-form" id="permissionForm" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">医生名称</label>
            <div class="layui-input-block" style="width:300px">
                <input type="text" name="doctorName" id="doctorName" lay-verify="required" placeholder="请输入" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">医生头像:</label>
                <div class="layui-input-inline layui-input-wrap">
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 图片上传
                    </button>
                    <div style="width: 132px;">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                            <div id="ID-upload-demo-text"></div>
                            <div class="layui-progress" id="upload-progress-bar">
                                <div class="layui-progress-bar" lay-percent="0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属院区</label>
            <div class="layui-input-block" style="width:300px">
                <select name="campusId" id="campusId">
                    <option value="0">请选择</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属科室</label>
            <div class="layui-form layui-row layui-col-space16">
                <!-- 第一个下拉框 -->
                <div class="layui-form-item">
                    <div class="layui-input-block" style="width:300px">
                        <select name="deparId1" id="deparId1" lay-filter="superAffiliation1">
                            <option value="0">请选择</option>
                        </select>
                    </div>
                </div>

                <!-- 第二个下拉框 -->
                <div class="layui-form-item">
                    <div class="layui-input-block" style="width:300px">
                        <select name="deparId2" id="deparId2" lay-filter="superAffiliation2">
                            <option value="0">请选择</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">医生职称</label>
            <div class="layui-input-block" style="width:300px">
                <select name="titlemanagementId" id="titlemanagementId">
                    <option value="0">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">医生标签</label>
            <div class="layui-input-block">
                <input type="checkbox" name="doctorlabel[]" value="肝功能" title="肝功能">
                <input type="checkbox" name="doctorlabel[]" value="肾功能" title="肾功能">
                <input type="checkbox" name="doctorlabel[]" value="心脑血管" title="心脑血管">
                <input type="checkbox" name="doctorlabel[]" value="泌尿学科" title="泌尿学科">
                <input type="checkbox" name="doctorlabel[]" value="心脏病" title="心脏病">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">挂号费</label>
            <div class="layui-input-block" style="width:300px">
                <input type="text" name="registrationfee" id="registrationfee" lay-verify="required" placeholder="请输入"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">诊查费</label>
            <div class="layui-input-block" style="width:300px">
                <input type="text" name="consultationfee" id="consultationfee" lay-verify="required" placeholder="请输入"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">医生简介</label>
            <div class="layui-input-block" style="width">
                <textarea name="doctorintroduc" id="doctorintroduc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item" pane>
            <label class="layui-form-label">医生状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="doctorstate" id="doctorstate" lay-skin="switch" lay-filter="switchTest">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="addPermission">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <!-- 新增对话框 -->
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>
        $(document).ready(function () {

            // 点击上传按钮触发文件选择
            $('#ID-upload-demo-btn').on('click', function () {
                $('#doctorImageInput').click();
            });

            // 监听文件选择事件
            $('#doctorImageInput').on('change', function (e) {
                var file = e.target.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#ID-upload-demo-img').attr('src', e.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
        });

        layui.use(['form', 'layer', 'laydate', 'upload'], function () {
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var upload = layui.upload;
            var $ = layui.$;

            // 初始化日期选择器
            laydate.render({
                elem: '#date'
            });

            // 图片上传配置
            upload.render({
                elem: '#ID-upload-demo-btn',
                url: '@ViewBag.BaseUrl/T6/Doctor/UploadFile',
                type: 'POST',
                accept: 'images', // 只接受图片文件
                exts: 'jpg|png|gif|bmp|jpeg', // 允许的图片格式
                size: 2048, // 限制图片大小为 2MB
                before: function (obj) {
                    // 显示进度条
                    $('#upload-progress-bar').show();
                    obj.preview(function (index, file, result) {
                        $('#ID-upload-demo-img').attr('src', result);
                    });
                },
                done: function (res) {
                    console.log(res);
                    if (res.code === 100) {
                        layer.msg('图片上传成功');
                        $('#ID-upload-demo-img').attr('src', res.data);
                        // 将上传成功的图片地址存储到全局变量，以便表单提交时使用
                        window.uploadedImageUrl = res.data;
                    } else {
                        layer.msg('图片上传失败');
                    }
                },
            });

            // 加载医生职称数据的函数
            function loadDoctorTitles(pageIndex = 1, pageSize = 50) {
                $.ajax({
                    url: `@ViewBag.BaseUrl/T5/TitleManagement/GetTitleManagement?pageIndex=${pageIndex}&pageSize=${pageSize}`,
                    success: function (res) {
                        var $select = $('#titlemanagementId');
                        $select.find('option:not(:first)').remove();
                        res.data.forEach(item => {
                            $select.append(`<option value="${item.titleManagementId}">${item.jobName}</option>`);
                        });
                        form.render('select');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.msg(`加载医生职称数据出错: ${textStatus} - ${errorThrown}`);
                        console.error('加载医生职称数据出错:', jqXHR, textStatus, errorThrown);
                    }
                });
            }

            // 加载所属院区数据的函数
            function loadCampuses(pageIndex = 1, pageSize = 50) {
                $.ajax({
                    url: `@ViewBag.BaseUrl/T5/HospitalNavigation/GetHospitalNavigation?PageIndex=${pageIndex}&PageSize=${pageSize}`,
                    success: function (res) {
                        var $select = $('#campusId');
                        $select.find('option:not(:first)').remove();
                        res.data.forEach(item => {
                            $select.append(`<option value="${item.hospitalNavigationId}">${item.campusName}</option>`);
                        });
                        form.render('select');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.msg(`加载所属院区数据出错: ${textStatus} - ${errorThrown}`);
                        console.error('加载所属院区数据出错:', jqXHR, textStatus, errorThrown);
                    }
                });
            }

            // 页面加载时调用函数加载医生职称和所属院区数据
            loadDoctorTitles();
            loadCampuses();

            function loadDepartments(parentId, selector) {
                $.ajax({
                    url: `@ViewBag.BaseUrl/T5/Department/CascadeDepartment?parentId=${parentId || 0}`,
                    success: function (res) {
                        var $select = $(selector);
                        $select.find('option:not(:first)').remove();
                        res.data.forEach(item => {
                            $select.append(`<option value="${item.deparId}">${item.deparName}</option>`);
                        });
                        form.render('select');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.msg(`加载部门数据出错: ${textStatus} - ${errorThrown}`);
                        console.error('加载部门数据出错:', jqXHR, textStatus, errorThrown);
                    }
                });
            }

            // 调用 loadDepartments 函数填充第一个下拉框
            loadDepartments(null, '#deparId1');

            function loadChildDepartments(parentId, selector) {
                $.ajax({
                    url: `@ViewBag.BaseUrl/T5/Department/ChildDepartment?DeparId=${parentId}`,
                    success: function (res) {
                        var $select = $(selector);
                        $select.find('option:not(:first)').remove();
                        res.data.forEach(item => {
                            $select.append(`<option value="${item.deparId}">${item.deparName}</option>`);
                        });
                        form.render('select');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.msg(`加载子部门数据出错: ${textStatus} - ${errorThrown}`);
                        console.error('加载子部门数据出错:', jqXHR, textStatus, errorThrown);
                    }
                });
            }

            // 监听第一个下拉框的选择变化
            form.on('select(superAffiliation1)', function (data) {
                var selectedValue = data.value;
                if (selectedValue !== '0') {
                    loadChildDepartments(selectedValue, '#deparId2');
                } else {
                    // 如果选择了请选择，清空第二个下拉框
                    var $select = $('#deparId2');
                    $select.find('option:not(:first)').remove();
                    form.render('select');
                }
            });

            form.on('submit(addPermission)', function (data) {
                // 创建 FormData 对象
                var pdata = {
                    doctorName: $("#doctorName").val(),
                    campusId: $("#campusId").val(),
          
                    deparId: $("#deparId2").val(),
                    titlemanagementId: $("#titlemanagementId").val(),
                    doctorlabel: [],
                    registrationfee: $("#registrationfee").val(),
                    consultationfee: $("#consultationfee").val(),
                    doctorintroduc: $("#doctorintroduc").val(),
                    doctorstate: $("#doctorstate").prop('checked'),
                    doctorImage: window.uploadedImageUrl
                };

                // 获取医生标签多选框的值
                $('input[name="doctorlabel[]"]:checked').each(function () {
                    pdata.doctorlabel.push($(this).val());
                });

                // 将多选框的值数组转换为字符串
                pdata.doctorlabel = pdata.doctorlabel.join(',');

                // 打印要发送的数据
                console.log('发送的数据:', pdata);

                // 发送 Ajax 请求
                $.ajax({
                    url: '@ViewBag.BaseUrl/T6/Doctor/AddDoctor',
                    data: JSON.stringify(pdata),
                    type: 'post',
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (res) {
                        if (res.code === 100) {
                            layer.msg('添加成功');
                            $('#permissionForm')[0].reset();
                            // 添加页面跳转代码
                        
                        } else {
                            layer.msg(res.msg);
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        layer.msg(`请求出错: ${textStatus} - ${errorThrown}`);
                        console.error('请求出错:', jqXHR, textStatus, errorThrown);
                    }
                });

                return false;
            });
        });
    </script>
</body>

</html>    